<template>
  <div class="main">
    <div class="content">
      <div class="head">
        <div class="input">
          <span>教师姓名：</span>
          <el-input v-model="queryData.username" placeholder="请输入" />
        </div>
        <div class="input">
          <span>身份证号：</span>
          <el-input v-model="queryData.idcard" placeholder="请输入" />
        </div>
        <div class="input">
          <span>证书编号：</span>
          <el-input v-model="queryData.cert_code" placeholder="请输入" />
        </div>
        <el-button type="primary" class="btn" @click="search">查询</el-button>
        <el-button type="primary" class="btn" @click="reset">重置</el-button>
        <el-button type="primary" class="btn" @click="add">新增教师</el-button>
      </div>
      <el-table
        ref="dataForm"
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column fixed prop="username" align="center" show-overflow-tooltip label="教师姓名" min-width="140" />
        <el-table-column prop="idcard" align="center" label="身份证号" min-width="160"></el-table-column>
        <el-table-column prop="mobile" align="center" label="手机号" min-width="140"></el-table-column>
        <el-table-column prop="company_name" align="center" label="创建人" min-width="160"/>
        <el-table-column prop="update_time" align="center" label="修改时间" min-width="160"/>
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
          <template #default="scope">
            <div class="action">
              <span @click="edit(scope.row,2)">查看</span>
              <span @click="edit(scope.row,1)">编辑</span>
              <span @click="delOk(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
        <el-pagination
        background
        style="margin-top: 5px;text-align: right;"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {  TeacherList, TeacherDelete } from '@/api/manage';
// 自定义手机号校验规则
const validatePhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入手机号'));
  } else {
    // 简单的中国大陆手机号正则表达式
    const reg = /^1[3456789]\d{9}$/;
    if (reg.test(value)) {
      callback();
    } else {
      callback(new Error('请输入正确的手机号'));
    }
  }
};
// 身份证号校验函数
const validateIdCard = (rule, value, callback) => {
  const reg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/;
  if (!value) {
    return callback(new Error('请输入身份证号'));
  } else if (!reg.test(value)) {
    callback(new Error('请输入正确的身份证号格式'));
  } else {
    callback();
  }
};
export default {
  name: 'staff',
  data() {
    return {
      tableHeight: 500,
      name: '',
      list: [],
      isTableLoading: false,
      tableData: [],
      total: 0,
      queryData: {
        page: 1,
        size: 10,
        idcard: '',
        username: '',
        cert_code: '',
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
  },
  methods: {
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.username = '';
      this.queryData.idcard = '';
      this.queryData.cert_code = '';
      this.search();
    },
    add() {
      this.$router.push({
        path: '/company/addTeacher/index',
      })
    },
    edit(item,type) {
      this.$router.push({
        path: '/company/addTeacher/index',
        query: {
          id: item.id,
          type: type,
        },
      })
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk(item) {
      this.$confirm('确定删除该教师?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        TeacherDelete({
          id: item.id,
        }).then((res) => {
          this.$message.success('删除成功');
          this.getList();
          this.item = null;
        });
      });
    },
    handleImg(item) {
      this.imgList = [item.img_url];
      this.showImg = true;
      // ImagePreview({
      //   images: [item.img_url],
      //   startPosition: 0,
      //   zIndex: 9999,
      // });
    },
    handleClose() {
      this.ruleForm = {
        department_id: '',
        department_ids: [],
        username: '',
        idcard: '',
        mobile: '',
        edu_id: '',
        level_id: '',
        job_id: '',
        status: '',
        img_url: '',
        account: '',
        job_status: '',
      };
      this.isShowAdd = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.department_id = this.ruleForm.department_ids[this.ruleForm.department_ids.length - 1];
          StaffSave(this.ruleForm).then((res) => {
            this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
            this.getList();
            this.$refs[formName].resetFields();
            this.isShowAdd = false;
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleNodeClick(data, Node) {
      this.Node = Node;
      this.queryData.department_id = data.id;
      this.queryData.page = 1;
      this.getList();
    },
    handleImport(e) {
      let obj = new FormData();
      obj.append('file', e.file);
      StaffImport(obj).then((res) => {
        this.$message.success('导入成功');
        this.getList();
      });
    },
    handleAvatarSuccess(e) {
      let obj = new FormData();
      obj.append('file', e.file);
      upload(obj).then((res) => {
        this.ruleForm.img_url = res.data.url;
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    getList() {
      this.isTableLoading = true;
      TeacherList(this.queryData).then((res) => {
        this.isTableLoading = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: calc(-100px + 100vh);
  background: #fff;
  /* display: flex;
  align-items: flex-start; */
  overflow: hidden;
  padding: 25px 20px;
  position: relative;
}
.list {
  width: 220px;
  height: 95%;
  overflow: auto;
  flex-shrink: 0;
  padding-right: 15px;
  position: absolute;
  border-right: 1px solid #e3e3e3;
  left: 20px;
  top: 25px;
}
.content {
  width: 100%;
  min-height: 70vh;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span,
.look {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100%;
  display: block;
}
.prompt {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}
</style>
